<!--  
 +---------------------------------------------------------------------- 
 | 狂团[kt8.cn]旗下KtAdmin是为独立版SAAS系统而生的快速开发框架. 
 +---------------------------------------------------------------------- 
 | [KtAdmin] Copyright (c) 2022 http://ktadmin.cn All rights reserved. 
 +---------------------------------------------------------------------- 
 | Licensed ( http://www.apache.org/licenses/LICENSE-2.0 ) 
 +----------------------------------------------------------------------  
-->

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { postSystemGpt,postSystemGptset } from '@/api'
import bottomCopyringht from '../../../components/bottom-copyright.vue'
let form1 = reactive(
	{
  "channel": 1,
  "openai": {
    "api_key": "",
    "diy_host": "",
    "temperature": "1.0",
    "max_tokens": "1000",
    "model": "gpt-3.5-turbo",
    "stream": "true"
  },
  "api2d": {
    "forward_key": "",
    "temperature": "",
    "max_tokens": "",
    "model": "",
    "stream": "true"
  },
  "wxyy": {
    "api_key": "",
    "secret_key": ""
  },
  "tyqw": {},
  "kltg": {},
  "chatglm": {
    "api_key": "",
    "public_key": ""
  },
  "linkerai": {
      "api_key": "",
      "temperature": "1.0",
      "max_tokens": "1000",
      "model": "gpt-3.5-turbo"
    }
}
)


const token = ref(JSON.parse(localStorage.agenttoken).data)
const ruleFormRef1 = ref()

const submitForm1 = async (formEl) => {
	if (!formEl) return
	await formEl.validate((valid, fields) => {
		if (valid) {
			// form1.appid+=''
			postSystemGptset(form1).then((res) => {
				console.log(res)
				ElMessage({ message: '保存成功', type: 'success' })
			})
		} else {
			console.log('error submit!', fields)
			ElMessage({ message: '保存失败', type: 'error' })
		}
	})
}


const channelList = ref([
	{
		id:1,
		name:'openai',
		disable:false,
	},
	{
		id:2,
		name:'api2d',
		disable:false,
	},
	{
		id:3,
		name:'文心一言',
		disable:false,
	},
	{
		id:4,
		name:'通义千问',
		disable:true,
	},
	{
		id:5,
		name:'昆仑天工',
		disable:true,
	},
	{	
		id:6,
		name:'ChatGLM',
		disable:false,
	},
	{	
		id:7,
		name:'灵犀星火',
		disable:false,
	}
])
const modelList = [
	'gpt-3.5-turbo',
	'gpt-3.5-turbo-0301',
	'text-davinci-003',
	'text-davinci-002',
	'code-davinci-002',
	'gpt-4'
]
const streamList = ref([
	{val:'true',
		name:'流式回复'
	},
	{val:'false',
		name:'一次性完整输出'
	}
])
const resetForm1 = (formEl) => {
	if (!formEl) return
	formEl.resetFields()
	console.log('77')
}

const rules = reactive({
	// max_tokens: [
    // { min: 0, max: 1000, message: '请输入0-1000', trigger: 'blur' } ],
	
})



// 上传
const imageUrl = ''

const handleAvatarSuccess = (response, uploadFile) => {
	console.log(response, uploadFile)
	if (response.status == 'success') {
		imgurl.logo = response.data
	} else {
		ElMessage.error(response.msg)
	}
}
const handleAvatarSuccessdenglu = (response, uploadFile) => {
	// imgurl.denglu = response.data
	if (response.status == 'success') {
		imgurl.denglu = response.data
	} else {
		ElMessage.error(response.msg)
	}
}
const handleAvatarSuccesspc = (response, uploadFile) => {
	if (response.status == 'success') {
		imgurl.pc_denglu = response.data
	} else {
		ElMessage.error(response.msg)
	}
}
const handleAvatarSuccesskefu = (response, uploadFile) => {
	if (response.status == 'success') {
		imgurl.kefu_img = response.data
	} else {
		ElMessage.error(response.msg)
	}
}
const handleAvatarSuccessgong = (response, uploadFile) => {
	if (response.status == 'success') {
		imgurl.gong_img = response.data
	} else {
		ElMessage.error(response.msg)
	}
}

const beforeAvatarUpload = (rawFile) => {
	console.log(rawFile.type)
	if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png' && rawFile.type !== 'image/gif') {
		ElMessage.error('上传格式必须为.jpg,.png,.gif格式!')
		return false
	} else if (rawFile.size / 1024 / 1024 > 2) {
		ElMessage.error('Avatar picture size can not exceed 2MB!')
		return false
	}
	return true
}
// 获取数据
const getList = async() => {

	
		let r = await postSystemGpt()
		form1 = Object.assign(form1,r.data)
		if(!form1.openai){
			form1.openai = {
				"api_key": "",
				"diy_host": "",
				"temperature": "1.0",
				"max_tokens": "1000",
				"model": "gpt-3.5-turbo",
				"stream": 'true'
			}
		}
		if(!form1.api2d){
			form1.api2d = {
				"forward_key": "",
				"temperature": "",
				"max_tokens": "",
				"model": "",
				"stream": "true"
			}
		}

		if(!form1.wxyy){
			form1.wxyy = {
				"api_key": "",
    			"secret_key": ""
			}
		}
		if(!form1.chatglm){
			form1.chatglm = {
				"api_key": "",
    			"public_key": ""
			}
		}
		if(!form1.linkerai){
			form1.linkerai = {
				"api_key": "",
				"temperature": "1.0",
				"max_tokens": "1000",
				"model": "gpt-3.5-turbo"
			}
		}
	
	
	
}
onMounted(() => {
	getList()
})
</script>
<template>
	<div style="min-height: 700px">
		<div class="topTabStyle">
		
			<div class="cardContent">
				<div class="cardTabTop">
					<div class="cardTabTop1"></div>
					<div class="cardTabTop2">GPT配置</div>
				</div>
				<div class="cardFormStyle" style="width:auto">
					<el-form :rules="rules" ref="ruleFormRef1" :model="form1" label-width="120px" style="margin-top: -5px">
						<el-form-item label="AI接口:" prop="channel">
						<el-radio-group v-model="form1.channel" class="ml-4">
							<el-radio v-for="(item,index) in channelList" :disabled="item.disable" :key="index" :label="item.id" size="large">{{ item.name }}</el-radio>
							
						</el-radio-group>
					</el-form-item>
					<el-form-item v-if="form1.channel==1" label="api_key:" prop="api_key">
						<el-input v-model="form1.openai.api_key" style="width:400px"></el-input>
					</el-form-item>

					<el-form-item v-else-if="form1.channel==2" label="forward_key:" prop="forward_key">
						<el-input v-model="form1.api2d.forward_key" style="width:400px"></el-input>
					</el-form-item>

					<el-form-item label="接口域名:" prop="diy_host" v-if="form1.channel==1">
						<el-input v-model="form1.openai.diy_host" style="width:400px"></el-input>
					</el-form-item>

					<el-form-item label="温度:" prop="temperature" v-if="form1.channel==1">
						<div>
							<el-slider :min="0" :max="1" :step="0.1" v-model="form1.openai.temperature"></el-slider>
							<div class="s-tip">0-1之间,越大回答问题越灵活</div>
						</div>
						
					</el-form-item>
					<el-form-item label="温度:" prop="temperature" v-if="form1.channel==2">
						<div>
							<el-slider :min="0" :max="1" :step="0.1" v-model="form1.api2d.temperature"></el-slider>
							<div class="s-tip">0-1之间,越大回答问题越灵活</div>
						</div>
						
					</el-form-item>

					<el-form-item label="最大长度:" prop="max_tokens" v-if="form1.channel==1">
						<div>
							<el-input v-model="form1.openai.max_tokens" type="number"></el-input>
							<div class="s-tip">3.5最大支持3500tokens</div>
						</div>
						
					</el-form-item>
					<el-form-item label="最大长度:" prop="max_tokens" v-if="form1.channel==2">
						<div>
							<el-input v-model="form1.api2d.max_tokens" type="number"></el-input>
							<div class="s-tip">3.5最大支持3500tokens</div>
						</div>
						
					</el-form-item>

					<el-form-item label="模型:" prop="model" v-if="form1.channel==1">
					<el-select v-model="form1.openai.model">
						<el-option v-for="(item,index) in modelList" :key="index" :value="item" :label="item"></el-option>
					</el-select>
						
					</el-form-item>

					<el-form-item label="模型:" prop="model" v-if="form1.channel==2">
					<el-select v-model="form1.api2d.model">
						<el-option v-for="(item,index) in modelList" :key="index" :value="item" :label="item"></el-option>
					</el-select>
						
					</el-form-item>

					<el-form-item label="内容输出方式:" prop="stream" v-if="form1.channel==1">
						<el-radio-group v-model="form1.openai.stream" class="ml-4">
							<el-radio v-for="(item,index) in streamList" :key="index" :label="item.val"  size="large">{{ item.name }}</el-radio>
							
						</el-radio-group>
					</el-form-item>

					<el-form-item label="内容输出方式:" prop="stream" v-if="form1.channel==2">
						<el-radio-group v-model="form1.api2d.stream" class="ml-4">
							<el-radio v-for="(item,index) in streamList" :key="index" :label="item.val"  size="large">{{ item.name }}</el-radio>
							
						</el-radio-group>
					</el-form-item>

					<el-form-item label="key:" prop="api_key" v-if="form1.channel==3">
						<el-input v-model="form1.wxyy.api_key" style="width:400px"></el-input>
					
					</el-form-item>

					<el-form-item label="secret:" prop="secret" v-if="form1.channel==3">
						<el-input v-model="form1.wxyy.secret_key" style="width:400px"></el-input>
					
					</el-form-item>

					<el-form-item label="apikey:" prop="api_key" v-if="form1.channel==6">
						<el-input v-model="form1.chatglm.api_key" style="width:400px"></el-input>
					
					</el-form-item>

					<el-form-item label="publickey:" prop="secret" v-if="form1.channel==6">
						<el-input v-model="form1.chatglm.public_key" style="width:400px"></el-input>
					
					</el-form-item>

					<el-form-item v-if="form1.channel==7" label="api_key:" prop="api_key">
						<el-input v-model="form1.linkerai.api_key" style="width:400px"></el-input>
					</el-form-item>

					<el-form-item label="温度:" prop="temperature" v-if="form1.channel==7">
						<div>
							<el-slider :min="0" :max="1" :step="0.1" v-model="form1.linkerai.temperature"></el-slider>
							<div class="s-tip">0-1之间,越大回答问题越灵活</div>
						</div>
						
					</el-form-item>

					<el-form-item label="最大长度:" prop="max_tokens" v-if="form1.channel==7">
						<div>
							<el-input v-model="form1.linkerai.max_tokens" type="number"></el-input>
							<div class="s-tip">3.5最大支持3500tokens</div>
						</div>
						
					</el-form-item>


					<el-form-item label="模型:" prop="model" v-if="form1.channel==7">
					<el-select v-model="form1.linkerai.model">
						<el-option v-for="(item,index) in modelList" :key="index" :value="item" :label="item"></el-option>
					</el-select>
						
					</el-form-item>
					
					</el-form>
				</div>
			</div>
		

			<!-- 按钮 -->
			<div></div>
		</div>
		<div class="bottomButton">
			<el-button type="primary" @click="submitForm1(ruleFormRef1)">保存</el-button>
		</div>
		
	</div>
	<bottom-copyringht style="margin-bottom: 80px"></bottom-copyringht>
</template>
<style>
.el-input {
	border: none;
}
</style>
<style scoped>
.topTabStyle {
	position: relative;
	height: 65px;
	margin: 20px;
	background: #ffffff;
	box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.04);
	border-radius: 15px;
}

.tabStyleChild {
	width: 280px;
	height: 65px;
	line-height: 65px;
	font-size: 14px;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #8c8c8c;
	margin-left: 40px;
	display: flex;
	justify-content: space-between;
}

.tabSelect {
	text-align: center;
	color: #208eff;
	border-bottom: 2px solid #208eff;
}

.cardContent {
	background: #ffffff;
	margin-top: 20px;
	box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.04);
	border-radius: 8px;
	margin-bottom: 80px;
	height: 600px;
	overflow: auto;
}

.el-form-item {
	margin-bottom: 24px;
}

.cardTabTop {
	height: 66px;
	display: flex;
	margin-left: 25px;
	margin-top: 24px;
	padding-top: 23px;
	justify-content: flex-start;
}

.cardTabTop1 {
	width: 4px;
	height: 14px;
	background: #208eff;
}

.cardTabTop2 {
	/* width: 70px; */
	height: 14px;
	margin-left: 8px;
	font-size: 14px;
	font-family: PingFang-SC-Medium, PingFang-SC;
	font-weight: 500;
	color: #333333;
	line-height: 14px;
}

.cardFormStyle {
	width: 440px;
	padding-bottom: 24px;
	margin-left: 115px;
}

.bottomButton {
	position: fixed;
	bottom: 0;
	width: 100%;
	line-height: 60px;
	text-align: center;
	padding-right: 100px;
	height: 60px;

	background-color: #ffffff;
}
</style>
<style>
.avatar-uploader .el-upload {
	border: 1px dashed var(--el-border-color);
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
	border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 50px;
	height: 50px;
	text-align: center;
}
.s-tip{
	color: #999;
	font-size: 13px;
}
</style>
